<template>
  <div
    class="markdown-body"
    v-html="compiledMarkdown"
  />
</template>

<script>
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css';
import DOMPurify from 'dompurify';  //使用 DOMPurify 不会影响 Markdown 的渲染效果，但会确保输出的 HTML 是安全的。

export default {
  props: {
    source: {
      type: String,
      required: true
    }
  },
  data() {
    const md = new MarkdownIt({
      html: true,
      linkify: true,
      typographer: true,
      highlight: (str, lang) => {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return '<pre class="hljs"><code>' +
              hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
              '</code></pre>';
          } catch (__) { }
        }

        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
      }
    });

    // 自定义插件，支持 ==wenzi== 高亮
    md.use((markdownit) => {
      markdownit.inline.ruler.before('emphasis', 'highlight', (state, silent) => {
        const marker = state.src.charCodeAt(state.pos);
        if (marker !== 61 /* = */ || silent) return false;

        const start = state.pos;
        const end = state.src.indexOf('==', start + 2);
        if (end < 0) return false;

        const content = state.src.slice(start + 2, end);
        if (!content.trim()) return false;

        state.pos = end + 2;

        if (!silent) {
          const token = state.push('highlight', '', 0);
          token.content = content;
          token.markup = '==';
        }

        return true;
      });

      markdownit.renderer.rules.highlight = (tokens, idx) => {
        return `<span class="highlight">${tokens[idx].content}</span>`;
      };
    });

    return {
      md,
      compiledMarkdown: ''
    };
  },
  watch: {
    source: {
      immediate: true,
      handler() {
        const renderedMarkdown = this.md.render(this.source);
        // 使用 DOMPurify 清理 HTML
        this.compiledMarkdown = DOMPurify.sanitize(renderedMarkdown);
      }
    }
  }
};
</script>

<style>
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 代码块样式 */
pre {
  background-color: #000000;
  /* VSCode 风格的背景色 */
  padding: 11px;
  /* 内边距 */
  border-radius: 6px;
  /* 圆角 */
  overflow-x: auto;
  /* 横向滚动 */
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  /* 等宽字体 */
  font-size: 3px;
  /* 字体大小 */
  line-height: 1.5;
  /* 行高 */
  margin: 10px 0;
  /* 外边距 */
  border: 1px solid #444;
  /* 边框 */
}

/* 代码块内代码样式 */
code {
  color: #d4d4d4;
  /* VSCode 风格的代码颜色 */
  background-color: transparent;
  /* 透明背景 */
  padding: 0;
  /* 去掉内边距 */
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  /* 继承字体 */
  font-size: 16px;
  /* 字体大小 */
}


/* ==wenzi== 高亮样式 */
.highlight {
  background-color: yellow;
  padding: 2px 4px;
  border-radius: 4px;
  color: black;
}

/* 行内代码样式 */
.markdown-body code:not(pre code) {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 4px;
  color: #d14;
  font-family: 'Fira Code', 'Consolas', 'Courier New', Courier, monospace;
}

/* 引用样式 */
.markdown-body blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: #f9f9f9;
  border-left: 4px solid #ddd;
  color: #666;
}

/* 修改所有 Markdown 超链接的样式 */
.markdown-body a {
  color: #0066cc; /* 链接文本颜色 */
  font-weight: bold; /* 文本加粗 */
  text-decoration: underline; /* 添加下划线 */
  background-color: #ffffff; /* 背景颜色 */
  padding: 2px 4px; /* 内边距 */
  border-radius: 2px; /* 圆角边框 */
}
</style>